<html>
<title>五子棋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
	<style type="text/css">
		.chess_board
		{
			width:88%;
			height:88%;
			border-radius:10px;
			position:fixed;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			border:10px solid #fff;
			cursor:pointer;
		}
		.chess_board_aviable
		{
			width:82.5%;
			height:82.5%;
			border:2px solid #000;
			position:fixed;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			box-sizing:border-box;
		}
		.msg_box
		{
			width:230px;
			height:100px;
			position:fixed;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%) scale(0,0);
			background-color:#eee;
			border-radius:20px;
			transition:transform 0.5s;
			-webkit-transition:transform 0.5s;
			text-align:center;
			cursor:pointer;
		}
		.gez
		{
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			box-sizing:border-box;
			border-right:0.5px solid #000;
		}
		.gez2
		{
			-webkit-box-sizing:border-box;
			-moz-box-sizing:border-box;
			box-sizing:border-box;
			border-bottom:0.5px solid #000;
		}
	</style>
</head>
<body style="background-color:#ebe9e8">
	<div class="chess_board" style="background-color:#fff;"></div>
	<div class="chess_board_aviable" id="chess_board_aviable">
	</div>
	<div id="board" class="chess_board">
	</div>
	<div id="msg_box" class="msg_box" onclick="$('.msg_box').slideUp()"><nobr><div id="text" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:50px;font-family:仿宋"></div></nobr></div>
</body>
</html>